/* global document */
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeScene = ref(0)
const sceneViewer = ref(null)

// VR场景旋转效果
const initSceneViewer = () => {
  if (!sceneViewer.value) return

  const handleMouseMove = (e) => {
    const rect = sceneViewer.value.getBoundingClientRect()
    const centerX = rect.width / 2
    const centerY = rect.height / 2
    const mouseX = e.clientX - rect.left
    const mouseY = e.clientY - rect.top

    const rotateY = ((mouseX - centerX) / centerX) * 8
    const rotateX = ((mouseY - centerY) / centerY) * -5

    sceneViewer.value.style.transform = `perspective(1200px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
  }

  const resetTransform = () => {
    sceneViewer.value.style.transform = 'perspective(1200px) rotateX(0) rotateY(0)'
  }

  sceneViewer.value.addEventListener('mousemove', handleMouseMove)
  sceneViewer.value.addEventListener('mouseleave', resetTransform)
}

onMounted(() => {
  initSceneViewer()
  nextTick(() => {
    // 游戏截图3D hover
    const items = document.querySelectorAll('.screenshot-item')
    items.forEach(item => {
      item.addEventListener('mousemove', (e) => {
        const rect = item.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        const centerX = rect.width / 2
        const centerY = rect.height / 2
        const rotateY = ((x - centerX) / centerX) * 12
        const rotateX = ((centerY - y) / centerY) * 10
        item.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.08)`
        item.style.setProperty('--glare-x', `${x}px`)
        item.style.setProperty('--glare-y', `${y}px`)
      })
      item.addEventListener('mouseleave', () => {
        item.style.transform = ''
        item.style.setProperty('--glare-x', `-100px`)
        item.style.setProperty('--glare-y', `-100px`)
      })
    })
    // VR视角区强VR交互
    const viewer = document.querySelector('.vr-perspective-viewer')
    const leftLens = document.querySelector('.left-lens img')
    const rightLens = document.querySelector('.right-lens img')
    if (viewer && leftLens && rightLens) {
      viewer.addEventListener('mousemove', (e) => {
        const rect = viewer.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        const centerX = rect.width / 2
        const centerY = rect.height / 2
        const leftRotateY = ((x - centerX) / centerX) * 10
        const leftRotateX = ((centerY - y) / centerY) * 8
        const rightRotateY = -leftRotateY
        const rightRotateX = leftRotateX
        leftLens.style.transform = `perspective(800px) rotateY(${leftRotateY}deg) rotateX(${leftRotateX}deg) scale(1.05)`
        rightLens.style.transform = `perspective(800px) rotateY(${rightRotateY}deg) rotateX(${rightRotateX}deg) scale(1.05)`
        leftLens.style.setProperty('--glare-x', `${x * 0.7}px`)
        leftLens.style.setProperty('--glare-y', `${y * 0.8}px`)
        rightLens.style.setProperty('--glare-x', `${rect.width - x * 0.7}px`)
        rightLens.style.setProperty('--glare-y', `${y * 0.8}px`)
      })
      viewer.addEventListener('mouseleave', () => {
        leftLens.style.transform = ''
        rightLens.style.transform = ''
        leftLens.style.setProperty('--glare-x', `-100px`)
        leftLens.style.setProperty('--glare-y', `-100px`)
        rightLens.style.setProperty('--glare-x', `-100px`)
        rightLens.style.setProperty('--glare-y', `-100px`)
      })
    }
    // 交互体验卡片VR特效
    const cards = document.querySelectorAll('.interaction-card')
    cards.forEach(card => {
      const img = card.querySelector('img')
      card.addEventListener('mousemove', (e) => {
        const rect = card.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        const centerX = rect.width / 2
        const centerY = rect.height / 2
        const rotateY = ((x - centerX) / centerX) * 14
        const rotateX = ((centerY - y) / centerY) * 12
        card.style.transform = `perspective(700px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.07)`
        card.style.setProperty('--glare-x', `${x}px`)
        card.style.setProperty('--glare-y', `${y}px`)
        if (img) {
          img.style.transform = `scale(1.08) translateY(-8px)`
        }
      })
      card.addEventListener('mouseleave', () => {
        card.style.transform = ''
        card.style.setProperty('--glare-x', `-100px`)
        card.style.setProperty('--glare-y', `-100px`)
        if (img) {
          img.style.transform = ''
        }
      })
    })
  })
})

const scenes = ref([
  {
    id: 1,
    name: '太空站Alpha',
    description:
      '漂浮在地球轨道上的未来太空站。在这个高科技环境中，玩家可以体验零重力移动，执行太空任务，修复太空舱，或者只是欣赏窗外壮观的地球景观。',
    image:
      'https://images.pexels.com/photos/41162/moon-landing-apollo-11-nasa-buzz-aldrin-41162.jpeg',
    features: ['零重力环境', '交互式控制面板', '太空漫步体验', '地球全景视图'],
    color: 'rgba(41, 121, 255, 0.8)',
  },
  {
    id: 2,
    name: '远古神庙',
    description:
      '隐藏在茂密丛林中的神秘神庙。玩家可以探索古代建筑，解开谜题，避开陷阱，发现隐藏的宝藏。神庙内部有精心设计的壁画和雕像，讲述着遗失的文明故事。',
    image: 'https://images.pexels.com/photos/5711687/pexels-photo-5711687.jpeg',
    features: ['复杂的解谜机制', '动态陷阱系统', '隐藏的秘密通道', '精美的古代艺术品'],
    color: 'rgba(219, 124, 38, 0.8)',
  },
  {
    id: 3,
    name: '未来城市',
    description:
      '设置在2150年的未来大都市。霓虹灯闪烁，全息广告投影在高楼之间，飞行车辆穿梭于空中交通网络。玩家可以探索这座充满生活气息的城市，与各种未来科技互动。',
    image: 'https://images.pexels.com/photos/1363876/pexels-photo-1363876.jpeg',
    features: ['开放世界探索', '人工智能NPC交互', '飞行交通系统', '未来商店与娱乐场所'],
    color: 'rgba(233, 30, 99, 0.8)',
  },
  {
    id: 4,
    name: '海底世界',
    description:
      '深入海洋深处的奇幻世界。玩家将探索五彩斑斓的珊瑚礁，与海洋生物互动，发现沉没的古代城市和沉船宝藏。先进的水下物理效果让一切看起来栩栩如生。',
    image: 'https://images.pexels.com/photos/3894257/pexels-photo-3894257.jpeg',
    features: ['真实的水下物理效果', '多样的海洋生物生态系统', '沉没的遗迹探索', '水下洞穴系统'],
    color: 'rgba(0, 188, 212, 0.8)',
  },
  {
    id: 5,
    name: '极地基地',
    description:
      '位于南极洲的研究基地，四周是无尽的冰雪。玩家需要在极端天气条件下生存，管理资源，修复设备，并探索冰层下隐藏的秘密。',
    image: 'https://images.pexels.com/photos/4101555/pexels-photo-4101555.jpeg',
    features: ['动态天气系统', '温度管理机制', '冰层探索', '极地动物遭遇'],
    color: 'rgba(3, 169, 244, 0.8)',
  },
])

const interactions = ref([
  {
    title: '物体互动',
    description: '在游戏中抓取、投掷和操作各种物体，体验真实物理效果。',
    image: 'https://images.pexels.com/photos/7567443/pexels-photo-7567443.jpeg',
  },
  {
    title: '环境变化',
    description: '您的行为会影响游戏环境，开关机器、改变光线或触发事件。',
    image: 'https://images.pexels.com/photos/7915257/pexels-photo-7915257.jpeg',
  },
  {
    title: 'NPC交互',
    description: '与游戏中的角色互动，通过对话和任务推进游戏剧情。',
    image: 'https://images.pexels.com/photos/8885024/pexels-photo-8885024.jpeg',
  },
])

// 按钮点击事件处理
const handleExploreScene = () => {
  router.push('/download')
}

const handleExperienceNow = () => {
  router.push('/download')
}

const handleLearnMoreScenes = () => {
  router.push('/about')
}
</script>

<template>
  <div class="scenes-wrapper">
    <div class="scenes">
      <div class="scenes-hero">
        <div class="vr-overlay"></div>
        <div class="cyber-grid"></div>
        <h1
          class="vr-mega-title vr-hologram-title animate__animated animate__fadeIn"
          data-text="游戏场景"
        >
          游戏<span class="highlight">场景</span>
          <span class="glitch-layer">游戏场景</span>
          <span class="glitch-layer">游戏场景</span>
          <div class="digital-noise"></div>
        </h1>
        <p class="vr-subtitle animate__animated animate__fadeIn animation-delay-1">
          探索我们精心设计的虚拟世界
        </p>
        <div class="vr-helmet animate__animated animate__fadeInUp animation-delay-2">
          <div class="helmet-lens left"></div>
          <div class="helmet-lens right"></div>
        </div>
        <div class="hologram-rings">
          <div class="ring ring1"></div>
          <div class="ring ring2"></div>
          <div class="ring ring3"></div>
        </div>
      </div>

      <div class="vr-navigation">
        <div class="container">
          <h2 class="vr-mega-title vr-floating-title">
            选择要<span class="highlight">探索</span>的世界
          </h2>
          <div class="scene-navigator">
            <div
              v-for="(scene, index) in scenes"
              :key="scene.id"
              class="scene-nav-item"
              :class="{ active: activeScene === index }"
              @click="activeScene = index"
              :style="{ '--scene-color': scene.color }"
            >
              <div class="nav-icon">{{ index + 1 }}</div>
              <div class="nav-label">{{ scene.name }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="scene-viewer-wrapper">
        <div class="scene-viewer" ref="sceneViewer">
          <div class="scene-transition" :style="{ '--scene-color': scenes[activeScene].color }">
            <div
              class="scene-bg"
              :style="{ backgroundImage: `url(${scenes[activeScene].image})` }"
            ></div>
            <div class="scene-overlay"></div>

            <div class="scene-content animate__animated animate__fadeIn">
              <div class="scene-header">
                <h2>{{ scenes[activeScene].name }}</h2>
                <div class="vr-badge">VR 体验</div>
              </div>
              <p class="scene-description">{{ scenes[activeScene].description }}</p>

              <div class="scene-features">
                <h3>场景特点</h3>
                <div class="feature-grid">
                  <div
                    class="feature-badge"
                    v-for="(feature, i) in scenes[activeScene].features"
                    :key="i"
                  >
                    <span class="feature-icon">+</span>
                    {{ feature }}
                  </div>
                </div>
              </div>

              <el-button
                type="primary"
                class="experience-button animate__animated animate__pulse animate__infinite"
                @click="handleExploreScene"
              >
                <span class="button-icon">VR</span>
                探索场景
              </el-button>
            </div>

            <div class="scene-decoration">
              <div class="corner-bracket top-left"></div>
              <div class="corner-bracket top-right"></div>
              <div class="corner-bracket bottom-left"></div>
              <div class="corner-bracket bottom-right"></div>
              <div class="floating-element e1"></div>
              <div class="floating-element e2"></div>
              <div class="floating-element e3"></div>
            </div>
          </div>
        </div>

        <div class="scene-controller">
          <div class="controller-hint">
            <div class="hint-icon"><i class="el-icon-pointer"></i></div>
            <div class="hint-text">移动鼠标体验VR效果</div>
          </div>
        </div>
      </div>

      <!-- 新增: 游戏截图展示 -->
      <div class="screenshots-section">
        <div class="container">
          <h2 class="section-title">游戏<span class="highlight">截图</span></h2>
          <p class="section-description">精美的游戏画面，让您提前预览游戏的视觉盛宴</p>

          <div class="screenshots-grid">
            <div class="screenshot-item animate__animated animate__zoomIn" v-vrhover v-intersect>
              <img
                src="https://images.pexels.com/photos/5864150/pexels-photo-5864150.jpeg"
                alt="游戏截图1"
                class="screenshot-img"
              />
              <div class="screenshot-overlay">
                <div class="screenshot-title">太空站驾驶舱</div>
              </div>
            </div>
            <div
              class="screenshot-item animate__animated animate__zoomIn animation-delay-1"
              v-vrhover v-intersect
            >
              <img
                src="https://images.pexels.com/photos/5711687/pexels-photo-5711687.jpeg"
                alt="游戏截图2"
                class="screenshot-img"
              />
              <div class="screenshot-overlay">
                <div class="screenshot-title">远古神庙内部</div>
              </div>
            </div>
            <div
              class="screenshot-item animate__animated animate__zoomIn animation-delay-2"
              v-vrhover v-intersect
            >
              <img
                src="https://images.pexels.com/photos/1439226/pexels-photo-1439226.jpeg"
                alt="游戏截图3"
                class="screenshot-img"
              />
              <div class="screenshot-overlay">
                <div class="screenshot-title">未来城市街景</div>
              </div>
            </div>
            <div
              class="screenshot-item animate__animated animate__zoomIn animation-delay-1"
              v-vrhover v-intersect
            >
              <img
                src="https://images.pexels.com/photos/1529881/pexels-photo-1529881.jpeg"
                alt="游戏截图4"
                class="screenshot-img"
              />
              <div class="screenshot-overlay">
                <div class="screenshot-title">深海探索</div>
              </div>
            </div>
            <div
              class="screenshot-item animate__animated animate__zoomIn animation-delay-2"
              v-vrhover v-intersect
            >
              <img
                src="https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg"
                alt="游戏截图5"
                class="screenshot-img"
              />
              <div class="screenshot-overlay">
                <div class="screenshot-title">极地暴风雪</div>
              </div>
            </div>
          </div>
        </div>
        <div class="vr-perspective-effect"></div>
      </div>

      <!-- 新增: 第一人称VR视角 -->
      <div class="vr-perspective-section">
        <div class="container">
          <h2 class="section-title">第一人称<span class="highlight">VR视角</span></h2>
          <p class="section-description">身临其境的沉浸式体验，仿佛亲临虚拟世界</p>

          <div class="vr-perspective-viewer animate__animated animate__fadeIn" v-intersect>
            <div class="vr-perspective-hud">
              <div class="hud-ring"></div>
              <div class="icon-360">360°</div>
            </div>
            <div class="vr-lens left-lens">
              <img
                src="https://images.pexels.com/photos/8985506/pexels-photo-8985506.jpeg"
                alt="左眼视角"
              />
              <div class="lens-overlay"></div>
              <div class="lens-data">
                <div class="lens-info">左眼视角</div>
                <div class="lens-stats">FOV: 110°</div>
              </div>
            </div>
            <div class="vr-lens right-lens">
              <img
                src="https://images.pexels.com/photos/8985506/pexels-photo-8985506.jpeg"
                alt="右眼视角"
              />
              <div class="lens-overlay"></div>
              <div class="lens-data">
                <div class="lens-info">右眼视角</div>
                <div class="lens-stats">视差调整: 自动</div>
              </div>
            </div>
            <div class="vr-nose-gap"></div>
            <div class="vr-hud">
              <div class="hud-element top-left">生命值: 100%</div>
              <div class="hud-element top-right">氧气: 95%</div>
              <div class="hud-element bottom-left">坐标: X-2451 Y-187</div>
              <div class="hud-element bottom-right">重力: 0.3G</div>
              <div class="hud-compass">N</div>
            </div>
          </div>

          <div class="vr-controls">
            <div
              class="control-instruction animate__animated animate__fadeIn animation-delay-1"
              v-intersect
            >
              <div class="control-icon">👀</div>
              <div class="control-text">环顾四周，探索360°全景视图</div>
            </div>
            <div
              class="control-instruction animate__animated animate__fadeIn animation-delay-2"
              v-intersect
            >
              <div class="control-icon">👋</div>
              <div class="control-text">使用手势控制与环境互动</div>
            </div>
            <div
              class="control-instruction animate__animated animate__fadeIn animation-delay-3"
              v-intersect
            >
              <div class="control-icon">🔊</div>
              <div class="control-text">3D空间音频定位敌人方位</div>
            </div>
          </div>
        </div>
      </div>

      <div class="vr-cta">
        <div class="container">
          <div class="cta-content">
            <h2 class="animate__animated animate__fadeIn" v-intersect>
              准备好<span class="highlight">体验</span>了吗？
            </h2>
            <p class="animate__animated animate__fadeIn animation-delay-1" v-intersect>
              戴上你的VR头盔，进入我们创造的奇幻世界。每个场景都是精心设计，带给您最佳沉浸感。
            </p>
            <div
              class="cta-buttons animate__animated animate__fadeIn animation-delay-2"
              v-intersect
            >
              <el-button type="primary" class="vr-glow-button" @click="handleExperienceNow"
                >立即体验</el-button
              >
              <el-button type="info" class="vr-outline-button" @click="handleLearnMoreScenes"
                >了解更多场景</el-button
              >
            </div>
          </div>
        </div>

        <div class="vr-waves">
          <div class="wave wave1"></div>
          <div class="wave wave2"></div>
          <div class="wave wave3"></div>
        </div>
      </div>
    </div>

    <!-- 互动体验部分 -->
    <div class="vr-interactions">
      <div class="container">
        <h2
          class="vr-mega-title vr-hologram-title animate__animated animate__fadeIn"
          data-text="交互体验"
          v-intersect
        >
          交互<span class="highlight">体验</span>
          <span class="glitch-layer">交互体验</span>
          <span class="glitch-layer">交互体验</span>
          <div class="digital-noise"></div>
        </h2>
        <div class="interaction-container">
          <el-row :gutter="30">
            <el-col :xs="24" :md="8" v-for="(item, index) in interactions" :key="index">
              <div class="interaction-card animate__animated" v-intersect>
                <div class="vr-particles">
                  <div v-for="i in 8" :key="i" class="vr-particle" :style="{
                    left: `${Math.random()*90+5}%`,
                    top: `${Math.random()*90+5}%`,
                    animationDelay: `${Math.random()*4}s`,
                    animationDuration: `${6+Math.random()*4}s`
                  }"></div>
                </div>
                <div class="interaction-image">
                  <div class="image-frame"></div>
                  <img :src="item.image" :alt="item.title" />
                  <div class="image-overlay"></div>
                </div>
                <div class="interaction-content">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.description }}</p>
                  <div class="interaction-line"></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
.scenes-wrapper {
  width: 100%;
  background-color: #0a0a1a;
  color: #ffffff;
  overflow: hidden;
}

.scenes {
  width: 100%;
  background-color: #0a0a1a;
  color: #ffffff;
  overflow: hidden;
}

.scenes-hero {
  height: 60vh;
  background-image: url('https://images.pexels.com/photos/2582937/pexels-photo-2582937.jpeg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.vr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));
  z-index: 1;
}

.cyber-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(0, 195, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 195, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: bottom;
  animation: grid-move 15s linear infinite;
  opacity: 0.3;
  z-index: 2;
}

@keyframes grid-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 50px;
  }
}

.vr-mega-title {
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 195, 255, 0.8);
  position: relative;
  z-index: 3;
}

.vr-subtitle {
  font-size: 1.5rem;
  color: #a9c2ff;
  max-width: 700px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}

.highlight {
  color: #00c3ff;
  position: relative;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #00c3ff, transparent);
}

.vr-helmet {
  position: relative;
  width: 120px;
  height: 60px;
  background: rgba(0, 195, 255, 0.2);
  border: 2px solid rgba(0, 195, 255, 0.5);
  border-radius: 10px;
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 0 30px rgba(0, 195, 255, 0.5);
  z-index: 3;
}

.helmet-lens {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #00c3ff, #0041cc);
  box-shadow: 0 0 15px rgba(0, 195, 255, 0.8) inset;
}

.animation-delay-1 {
  animation-delay: 0.3s;
}

.animation-delay-2 {
  animation-delay: 0.6s;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.vr-navigation {
  background-color: #070713;
  padding: 60px 0 30px;
  position: relative;
}

.vr-mega-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.scene-navigator {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap;
}

.scene-navigator::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(0, 195, 255, 0.3), transparent);
  z-index: 0;
}

.scene-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  padding: 0 10px;
  margin-bottom: 20px;
}

.nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #111;
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.nav-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.scene-nav-item:hover .nav-icon {
  transform: translateY(-5px);
  border-color: rgba(0, 195, 255, 0.5);
  box-shadow: 0 0 15px var(--scene-color, rgba(0, 195, 255, 0.3));
}

.scene-nav-item:hover .nav-label {
  color: #fff;
}

.scene-nav-item.active .nav-icon {
  background: var(--scene-color, #00c3ff);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 0 20px var(--scene-color, rgba(0, 195, 255, 0.5));
}

.scene-nav-item.active .nav-label {
  color: var(--scene-color, #00c3ff);
  font-weight: 600;
}

.scene-viewer-wrapper {
  padding: 30px 0 80px;
  background: linear-gradient(to bottom, #070713, #0a0a1a);
  position: relative;
}

.scene-viewer {
  max-width: 1000px;
  height: 500px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
}

.scene-transition {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.5s ease;
}

.scene-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.scene-viewer:hover .scene-bg {
  transform: scale(1.05);
}

.scene-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
}

.scene-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scene-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.scene-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-right: 15px;
  color: #fff;
}

.vr-badge {
  padding: 5px 12px;
  background: var(--scene-color, rgba(0, 195, 255, 0.2));
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 20px;
  display: flex;
  align-items: center;
  height: 24px;
}

.scene-description {
  margin-bottom: 25px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
}

.scene-features {
  margin-bottom: 30px;
}

.scene-features h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.feature-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 15px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  border-left: 3px solid var(--scene-color, #00c3ff);
}

.feature-icon {
  margin-right: 8px;
  color: var(--scene-color, #00c3ff);
  font-weight: bold;
}

.experience-button {
  background: var(--scene-color, linear-gradient(45deg, #0088ff, #00c3ff));
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 0 20px var(--scene-color, rgba(0, 195, 255, 0.3));
  display: flex;
  align-items: center;
  max-width: fit-content;
  margin-top: auto;
}

.button-icon {
  font-weight: 900;
  margin-right: 8px;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.scene-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.corner-bracket {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, 0.3);
  z-index: 3;
}

.top-left {
  top: 15px;
  left: 15px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.top-right {
  top: 15px;
  right: 15px;
  border-top: 2px solid;
  border-right: 2px solid;
}

.bottom-left {
  bottom: 15px;
  left: 15px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.bottom-right {
  bottom: 15px;
  right: 15px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

.floating-element {
  position: absolute;
  background: var(--scene-color, rgba(0, 195, 255, 0.2));
  border-radius: 50%;
  opacity: 0.7;
  filter: blur(3px);
}

.e1 {
  width: 100px;
  height: 100px;
  top: 10%;
  right: 10%;
  animation: float 12s infinite ease-in-out;
}

.e2 {
  width: 60px;
  height: 60px;
  bottom: 15%;
  right: 20%;
  animation: float 8s infinite ease-in-out reverse;
}

.e3 {
  width: 40px;
  height: 40px;
  bottom: 30%;
  right: 35%;
  animation: float 15s infinite ease-in-out;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) rotate(360deg);
    opacity: 0.5;
  }
}

.scene-controller {
  text-align: center;
  margin-top: 30px;
  opacity: 0.7;
}

.controller-hint {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.hint-icon {
  margin-right: 10px;
  color: var(--scene-color, #00c3ff);
}

.vr-cta {
  padding: 100px 0;
  background:
    linear-gradient(rgba(10, 10, 26, 0.8), rgba(7, 7, 21, 0.8)),
    url('https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg') center/cover fixed;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-content {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-content h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
}

.cta-content p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 30px;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.vr-glow-button {
  background: linear-gradient(45deg, #0088ff, #00c3ff);
  border: none;
  padding: 12px 25px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.5);
  transition: all 0.3s ease;
}

.vr-glow-button:hover {
  box-shadow: 0 0 30px rgba(0, 195, 255, 0.8);
  transform: translateY(-3px);
}

.vr-outline-button {
  background: transparent;
  border: 1px solid rgba(0, 195, 255, 0.5);
  color: #00c3ff;
  padding: 12px 25px;
  transition: all 0.3s ease;
}

.vr-outline-button:hover {
  background: rgba(0, 195, 255, 0.1);
}

.vr-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 134" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(0, 195, 255, 0.2)" d="M0,23.3c117.1,17.8,223.3,12.9,338.6-14.9c107.2-25.9,202.1,7.8,295.8,30.1c88.2,21,180.5,34.6,279.4,2.1 c82.3-26.9,190,8.8,285.2,0.3V134H0V23.3z"/></svg>');
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: 50% auto;
}

.wave1 {
  opacity: 0.3;
  animation: wave 18s linear infinite;
  z-index: 1;
}

.wave2 {
  opacity: 0.2;
  animation: wave 12s linear infinite;
  animation-delay: -5s;
  bottom: 10px;
  z-index: 0;
}

.wave3 {
  opacity: 0.1;
  animation: wave 8s linear infinite;
  animation-delay: -2s;
  bottom: 15px;
  z-index: -1;
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .vr-mega-title {
    font-size: 2.5rem;
  }

  .scene-navigator {
    justify-content: center;
    gap: 20px;
  }

  .scene-viewer {
    height: auto;
  }

  .scene-content {
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .cta-buttons {
    flex-direction: column;
  }
}

.screenshots-section {
  padding: 100px 0;
  background-color: #0a0a1a;
  position: relative;
}

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 50px;
}

.screenshot-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s cubic-bezier(.25,1.5,.5,1), box-shadow 0.4s;
  will-change: transform, box-shadow;
  --glare-x: -100px;
  --glare-y: -100px;
}

.screenshot-item:hover {
  transform: perspective(600px) rotateY(8deg) scale(1.06);
  box-shadow: 0 0 40px 0 #00c3ff, 0 10px 40px rgba(0,195,255,0.3);
  z-index: 2;
}

.screenshot-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  border-radius: 12px;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 40%, transparent 70%);
  z-index: 2;
}

.screenshot-item:hover::before {
  box-shadow: 0 0 24px 4px #00c3ff, 0 0 60px 8px #00c3ff44;
}

/* 扫描线特效 */
.screenshot-item::after {
  content: '';
  position: absolute;
  left: 0; right: 0; height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, #00c3ff88 40%, #00c3ff 60%, transparent);
  opacity: 0.7;
  border-radius: 2px;
  pointer-events: none;
  animation: screenshot-scan 2.5s linear infinite;
}

@keyframes screenshot-scan {
  0% { top: 0; opacity: 0.2; }
  10% { opacity: 0.7; }
  50% { top: 90%; opacity: 0.7; }
  100% { top: 100%; opacity: 0.2; }
}

.screenshot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screenshot-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.screenshot-item:hover .screenshot-overlay {
  opacity: 1;
}

.screenshot-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.vr-perspective-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.vr-perspective-section {
  padding: 100px 0;
  background-color: #0a0a1a;
  position: relative;
}

.section-description {
  text-align: center;
  color: #a9c2ff;
  max-width: 800px;
  margin: 20px auto 40px;
  font-size: 1.1rem;
  line-height: 1.6;
}

.vr-perspective-viewer {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  background: #000;
}

.vr-lens {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.vr-lens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.left-lens {
  border-right: 2px solid rgba(0, 195, 255, 0.5);
}

.right-lens {
  border-left: 2px solid rgba(0, 195, 255, 0.5);
}

.lens-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.lens-data {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #00c3ff;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.8);
  font-family: monospace;
  z-index: 2;
}

.lens-info {
  font-size: 1rem;
  margin-bottom: 5px;
}

.lens-stats {
  font-size: 0.8rem;
  opacity: 0.8;
}

.vr-nose-gap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 100px;
  background: #000;
  border-radius: 50%;
  z-index: 10;
  opacity: 0.7;
}

.vr-hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.hud-element {
  position: absolute;
  padding: 8px 12px;
  background: rgba(0, 195, 255, 0.1);
  border: 1px solid rgba(0, 195, 255, 0.3);
  color: #00c3ff;
  font-family: monospace;
  font-size: 0.8rem;
  border-radius: 5px;
  text-shadow: 0 0 5px rgba(0, 195, 255, 0.5);
}

.top-left {
  top: 20px;
  left: 20px;
}

.top-right {
  top: 20px;
  right: 20px;
}

.bottom-left {
  bottom: 20px;
  left: 20px;
}

.bottom-right {
  bottom: 20px;
  right: 20px;
}

.hud-compass {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 195, 255, 0.1);
  border: 1px solid rgba(0, 195, 255, 0.3);
  color: #00c3ff;
  font-family: monospace;
  font-size: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 5px rgba(0, 195, 255, 0.5);
}

.vr-controls {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.control-instruction {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border: 1px solid rgba(0, 195, 255, 0.2);
  border-radius: 10px;
  padding: 15px 20px;
  width: 200px;
  text-align: center;
}

.control-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.control-text {
  color: #a9c2ff;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .vr-perspective-viewer {
    height: 300px;
  }

  .vr-controls {
    flex-direction: column;
    align-items: center;
  }

  .control-instruction {
    width: 80%;
    margin-bottom: 15px;
  }
}

.vr-interactions {
  padding: 100px 0;
  background-color: #0a0a1a;
  position: relative;
}

.interaction-container {
  margin-top: 50px;
}

.interaction-card {
  --glare-x: -100px;
  --glare-y: -100px;
  position: relative;
  transition: transform 0.5s cubic-bezier(.25,1.5,.5,1), box-shadow 0.5s;
  will-change: transform, box-shadow;
  z-index: 1;
}
.interaction-card:hover {
  z-index: 2;
  box-shadow: 0 0 40px 0 #00c3ff, 0 10px 40px rgba(0,195,255,0.3), 0 0 80px #aa00ff44;
}
.interaction-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  border-radius: 12px;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255,255,255,0.18) 0%, rgba(0,195,255,0.08) 40%, transparent 70%);
  z-index: 2;
  transition: background 0.4s;
}
.interaction-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, #00c3ff88 40%, #00c3ff 60%, transparent);
  opacity: 0.7;
  border-radius: 2px;
  pointer-events: none;
  animation: screenshot-scan 2.5s linear infinite;
  z-index: 3;
}
@keyframes screenshot-scan {
  0% { top: 0; opacity: 0.2; }
  10% { opacity: 0.7; }
  50% { top: 90%; opacity: 0.7; }
  100% { top: 100%; opacity: 0.2; }
}
.interaction-image::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #00c3ff;
  box-shadow: 0 0 30px #00c3ff88, 0 0 60px #00c3ff44;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 4;
}
.interaction-card:hover .interaction-image::after {
  opacity: 1;
  animation: hud-rotate 6s linear infinite;
}
/* 粒子流特效 */
.interaction-card .vr-particles {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}
.interaction-card .vr-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c3ff, #aa00ff);
  opacity: 0.7;
  filter: blur(2px);
  animation: float-particle 8s infinite linear;
}
@keyframes float-particle {
  0% { transform: translateY(100px) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-120px) scale(1.2); opacity: 0; }
}

/* 全息环动画 */
.hologram-rings {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.ring {
  position: absolute;
  border: 2px solid rgba(0, 195, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.4);
  transform: translate(-50%, -50%) rotateX(75deg);
  animation: ring-pulse 4s infinite alternate;
}

.ring1 {
  width: 100px;
  height: 100px;
  animation-delay: 0s;
}

.ring2 {
  width: 200px;
  height: 200px;
  animation-delay: 0.5s;
}

.ring3 {
  width: 300px;
  height: 300px;
  animation-delay: 1s;
}

@keyframes ring-pulse {
  0% {
    transform: translate(-50%, -50%) rotateX(75deg) scale(0.9);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) rotateX(75deg) scale(1.1);
    opacity: 0.8;
  }
}

/* VR视角区HUD和高光 */
.vr-perspective-hud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vr-perspective-hud .hud-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid #00c3ff;
  box-shadow: 0 0 30px #00c3ff88, 0 0 60px #00c3ff44;
  animation: hud-rotate 6s linear infinite;
  margin-bottom: 10px;
}
@keyframes hud-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.vr-perspective-hud .icon-360 {
  width: 48px;
  height: 48px;
  background: rgba(0,195,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00c3ff;
  font-size: 2rem;
  font-weight: bold;
  box-shadow: 0 0 12px #00c3ff44;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* 左右眼高光 */
.vr-lens img {
  --glare-x: -100px;
  --glare-y: -100px;
  position: relative;
  transition: transform 0.4s cubic-bezier(.25,1.5,.5,1);
}
.vr-lens img::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 40%, transparent 70%);
  z-index: 2;
}

.interaction-image {
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.interaction-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.interaction-image .vr-particles,
.interaction-image .image-frame,
.interaction-image .image-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}
</style>
